/**
 * @title 锁列
 * @description 演示表格锁列的功能。锁列不生效？点击 https://fusion.design/help.html#/faq 查看常见原因及有效解决方案
 */

import * as React from 'react'
import styled from 'styled-components'

import { Table, Button } from '@alicloudfe/components'

const onRowClick = function (record, index, e) {
    console.log(record, index, e)
  },
  dataSource = () => {
    const result = []
    for (let i = 0; i < 100; i++) {
      result.push({
        title: {
          name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`
        },
        id: 100306660940 + i,
        time: 2000 + i
      })
    }
    return result
  },
  render = (value, index, record) => {
    return <a>Remove({record.id})</a>
  }

class App extends React.Component {
  state = {
    dataSource: [],
    cols: [
      <Table.Column
        title="Title"
        dataIndex="title.name"
        width={200}
        key="name1"
      />,
      <Table.ColumnGroup title="abc" key="name-group">
        <Table.Column
          title="Title"
          dataIndex="title.name"
          width={100}
          key="name2"
        />
        <Table.Column
          title="Title"
          dataIndex="title.name"
          width={400}
          key="name3"
        />
      </Table.ColumnGroup>,
      <Table.Column title="Time" dataIndex="time" width={500} key="time" />
    ],
    loading: true
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({
        dataSource: dataSource(),
        loading: false
      })
    }, 200)
  }
  reduceCol = () => {
    this.setState({
      cols: [
        <Table.Column
          title="Title"
          dataIndex="title.name"
          width={400}
          key="name1"
        />,
        <Table.Column
          title="Time"
          dataIndex="time"
          width={100}
          key="time"
          lock
        />
      ]
    })
  }
  render() {
    return (
      <div>
        <p>
          <Button onClick={this.reduceCol}>Reduce Cols</Button>
        </p>
        <Table.StickyLock
          dataSource={this.state.dataSource}
          onRowClick={onRowClick}
          fixedHeader
          loading={this.state.loading}
        >
          <Table.Column
            title="Id-Id-Id-Id-Id-Id-Id-Id-Id-Id-Id-Id"
            dataIndex="id"
            lock
            width={140}
          />
          {this.state.cols}
          <Table.Column cell={render} width={200} />
        </Table.StickyLock>
      </div>
    )
  }
}

export default function DemoComponent() {
  const content = <App />
  return <Style>{content}</Style>
}
const Style = styled.div``
